<template>
  <div class="wscn-http404-container">
    <div class="wscn-http404">
      <div class="pic-404">
        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
      </div>
      <div class="bullshit text-center">
        <el-button size="small" type="primary" @click="backToHome">返回主页</el-button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Page404',
  methods: {
    backToHome() {
      this.$router.push('/')
    }
  }
}
</script>

<style lang="scss" scoped>
.wscn-http404-container{
  width: 100%;
  height: calc(100vh - 70px);
  background: #F7F4F8;
}
.wscn-http404 {
  width: 100%;
  height: 100%;
  .pic-404 {
    height: 450px;
    position: relative;
    &__parent {
      width: 600px;
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
    }
  }
  .bullshit {
    position: relative;
    width: 100%;
    &__return-home {
      display: block;
      width: 110px;
      height: 36px;
      background: #1482f0;
      border-radius: 100px;
      text-align: center;
      color: #ffffff;
      opacity: 0;
      font-size: 14px;
      line-height: 36px;
      cursor: pointer;
    }
  }
}
  @media screen and (max-width: 1440px) {
    .wscn-http404-container {
      height: calc(100vh - 50px);
    }
  }
</style>
